<template>
    <view class="uploader-container flex wrap">
       <u-upload v-if="init" @on-change="change" :action="action"
		:fileList="showFles"
            :header="{'token': token}" :deletable="deletable" :max-count="maxUpload" :showProgress="showProgress"
            @on-remove="remove" :multiple="mutiple" :custom-btn="true" :width="previewSize" :height="previewSize"
            ref="upload">
            <view slot="addBtn" class="uplader-upload" hover-class="slot-btn__hover" hover-stay-time="150">
                <u-icon size="48" color="#dcdee0" name="camera" />
                <view class="xs m-t-10">
                    {{fileList.length>=1?fileList.length+'/'+maxUpload:tips}}
                </view>
            </view>
        </u-upload>
    </view>
</template>

<script>
	import { useUserStore } from '@/stores/user'
	import { storeToRefs } from 'pinia'
	const userStore = useUserStore()
	const { userInfo, isLogin,temToken } = storeToRefs(userStore);
	import { getToken } from '@/utils/auth'
    // import store from '@/store'
    export default {
        name: "uploader",
        props: {
            // 默认不允许多选图片
            mutiple: {
                type: Boolean,
                default: false
            },
			modelValue:{
				type:Array,
				default:() => {
					return [];
				}
			},
            // 限制上传文件数量
            maxUpload: {
                type: Number,
                default: 1
            },
            // upload大小
            previewSize: {
                type: String,
                default: "160"
            },
            // 是否可删除
            deletable: {
                type: Boolean,
                default: true,
            },
            // 提示
            tips: {
                type: String,
                default: '上传图片'
            },
            // 是否显示进度条
            showProgress: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {
                action: '',
                token: '',
                fileList: [],
				showFles:[],
				init:false,
				version: ''
            }
        },
		watch:{
			// value(){
			// 	console.log(this.value);
			// }
		},
        mounted() {
			let user = storeToRefs(userStore);
			// console.log("sdasdasd",storeToRefs(userStore););
   //          console.log(store.getters.token,baseURL)
			let baseURL = `${import.meta.env.VITE_APP_BASE_URL || ''}/`;
            this.action = baseURL + '/api/upload/image';
            this.token = getToken()
			this.fileList = this.modelValue;
			this.modelValue.forEach(img => {
				this.showFles.push({url:img});
			})
			this.init  =true;
			console.log("value",this.showFles);
        },
        methods: {
            // 上传，不管成不成功都返回数据｜提示
            change(event) {
				uni.showToast({
					title:JSON.parse(event.data).msg
				})
                // this.$toast({
                //     // title: JSON.parse(event.data).msg
                // })
                
                if(JSON.parse(event.data).code == 1) {
                    this.fileList.push(JSON.parse(event.data).data.uri)
                    this.$emit('update:modelValue', this.fileList)
                }
            },
            
            // 删除一个图片
            remove(event) {
                this.fileList.splice(event, 1);
                this.$emit('update:modelValue', this.fileList)
            }
        }
    }
</script>

<style lang="scss">
    .uploader-container {
        .uplader-upload {
            position: relative;
            width: 160rpx;
            height: 160rpx;
            padding-top: 30rpx;
            text-align: center;
            margin: 11rpx;
            border: 2px dashed #e5e5e5;
            background-color: #FFFFFF;

            >view {
                color: #BBB;
            }
        }
    }
</style>
